<template>
  <div>
    统计数据展示
    <el-row>
      <el-col :span="12">
        <div id="incomesDiv" style="height: 600px" />
      </el-col>
      <el-col :span="12">
        <div id="eduDiv" style="height: 600px" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import statApi from '@/api/admin/stat'
export default {
  data() {
    return {
      // { k:v,k:v }
      incomes: null,
      educations: null
    }
  },
  // 不能在created中执行：页面需要的echarts还未加载成功
  mounted() {
    // this.initCharts();
    this.initData()
  },
  methods: {
    initData() {
      statApi.list().then((r) => {
        this.educations = r.data.educations
        this.incomes = r.data.incomes
        // 数据加载成功后渲染页面中的饼图
        this.initCharts('incomesDiv', this.incomes)
        this.initCharts('eduDiv', this.educations)
      })
    },
    // 修改为通用的echart渲染的函数
    initCharts(eleId, data) {
      var chartDom = document.getElementById(eleId)
      var myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>
